<template>
    <div>
        <div class="seachInput" >
            <el-input placeholder="请输入姓名" v-model="search" class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="searchName"></el-button>
            </el-input>
        </div>
         <el-table :data="dataTable"  :highlight-current-row="true" stripe border class="table-index" :height="tableHeight" style="width: 100%;" :header-cell-style="getRowClass" v-loading="loading">
            <el-table-column fixed type="index" label="*"  min-width="40"></el-table-column>
            <el-table-column prop="name" label="姓名"  min-width="240"></el-table-column>
            <el-table-column prop="deptName" label="部门"  min-width="130"></el-table-column>
            <el-table-column prop="username" label="用户名"  min-width="130"></el-table-column>
            <el-table-column fixed="right" label="操作"  align="center" width="90">
                <template slot-scope="scope">
                     <el-button @click="updateList(scope.row)" type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="pagination.currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize"
                       layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>

        <el-dialog :title="dialog.title" width="800px" top="30px" :visible.sync="dialog.isShow" :close-on-click-modal="false">
            <el-tree :data="treeList" ref="tree" show-checkbox  node-key="id" :props="defaultProps" highlight-current :default-checked-keys='checkList' @check="checkNode">
                <span  slot-scope="{ node, data }">
                    <span :class="data.srcType===2?'tree-color-red':''" style="font-size: 15px;font-weight: bold;">{{ node.label }}</span>
                </span>
            </el-tree>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitDialog">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import api from '@/axios/api.js'
export default {
    data() {
        return {
            dataTable:[],
            dataList:[],
            tableHeight:document.documentElement.clientHeight - 160,
            loading:false,
            search:'',
            dialog:{
                isShow:false,
                title:'三级文件配置'
            },
            treeList:[],
           defaultProps: {
                children: 'children',
                label: 'name',
                id: 'id'
            },
            selectUserId:'',
            checkList:[],
            postSelectList:[],
            pagination:{
                currentPage:1,
                pageSize:10,
                total:0
            }
        }
    },
    created() {

    },
    mounted(){
        this.getUserList();
        this.getAllTree();
    },
    watch: {
        selectUserId(newValue,oldValue){
            this.getUserTree();
        },
    },
    methods: {
        getUserList(){//获取用户列表
            let self = this;
            self.loading=true;
            api.sjFileUserAllUser().then(res=>{
                self.dataList=res.content;
                self.loading=false;
                self.pagination.total =res.content.length
                self.getDateTable();
            },error=>{
                 self.loading=false;
            })
        },
        getDateTable(){//获取表格列表
            let list= this.dataList.filter(data => !this.search || data.name.toLowerCase().includes(this.search.toLowerCase()));
            this.dataTable = list.slice((this.pagination.currentPage-1)*this.pagination.pageSize,this.pagination.currentPage*this.pagination.pageSize);
        },
        updateList(row){/**点击编辑 */
            let self = this;
            self.dialog.isShow = true;
            self.selectUserId = row.id;
        },
        getAllTree(){
            let self = this;
             api.sjFileAllTree().then(res=>{/**获取三级文件树 */
                self.treeList=res.content
            })
        },
        checkNode(nodeList,selectList){/**修改三级文件选中配置 */
        let self = this;
        self.checkList=[];
        self.postSelectList=[];
        selectList.checkedNodes.forEach(el => {
            if(el.srcType==2){
                self.postSelectList.push({
                    id:null,
                    userId:self.selectUserId,
                    fileId:el.id,
                    parentId:el.parentId
                })
                 self.checkList.push(el.id)
            }
        });
        },
        getUserTree(){
            let self = this;
             self.checkList=[];
            api.userTree(self.selectUserId).then(res=>{
                res.content.forEach(el=>{
                    self.checkList.push(el.id);
                });
                 self.$refs.tree.setCheckedKeys( self.checkList);
            })
        },
        submitDialog(){/**点击提交三级文件配置修改 */
            let self = this;
            api.sjFileUserEditTree(self.postSelectList).then(res=>{
                self.dialog.isShow = false;
                self.$message.success('修改成功');
            },error=>{
                 self.$message.error('修改失败');
            })
        },
        handleSizeChange(size){/**改变分页页数 */
            this.pagination.currentPage=1;
            this.pagination.pageSize=size;
            this.getDateTable();
        },
        handleCurrentChange(current){/**改变分页当前页 */
            this.pagination.currentPage=current;
            this.getDateTable();
        },
        searchName(){/**点击查询名称 */
             this.getDateTable();
        }
    }
};

</script>

<style scoped>
.seachInput{
    width:260px;
    margin-bottom:16px;
}
.tree-color-red{
    color:#f56c6c;
}
</style>
